<!DOCTYPE html>

<head>
    <!-- 以下三个是移动相关的设置，需要放在title之前 -->
	<!--声明编码方式-->
    <meta charset="utf-8">
	<!--是IE8的一个专有<meta>属性，它告诉IE8采用何种IE版本去渲染网页-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!--viewport即显示样式，
	 width:可视区域的宽度，值可为数字或关键词device-width
     height:同width
     intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
     maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别-->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>煎药系统</title>

    <!-- 引入的boostrap的样式，需要放在前边 -->
    <link rel="stylesheet" href="../css/bootstrap/bootstrap.css" />
    <!-- 你自己的样式文件引入位置 -->
    <link rel="stylesheet" href="../css/index.css" />
</head>

<body>
    <div class="container-fluid fullscreen-height">
        <div class="row fullscreen-height">
            <!-- 左边的煎药机部分 -->
            <div class="col-md-6 col-xs-6 col-sm-6 col-lg-6 fullscreen-height">
                <!-- 煎药机面板第一部分 -->
                <div class="boil-board">
                    <h1>煎药面板</h1>
                </div>
                <!-- 煎药机面板第二部分 -->
                <div class="boil-board">
                    <h1>煎药面板</h1>
                </div>
                <!-- 煎药机面板第三部分 -->
                <div class="boil-board">
                    <h1>煎药面板</h1>
                </div>
				
            </div>

            <!-- 右边的包装部分 -->
            <div class="col-md-6 col-xs-6 col-sm-6 col-lg-6 fullscreen-height">
                <!-- 四个参数显示部分 -->
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-8 col-xs-8 col-sm-8 col-lg-8">
                            <div class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">上辊温度</label>
                                    <div class="col-sm-10">
                                        <p id="pack-upper-temp" class="form-control-static"><span>0</span>℃<span>（未启动）</span></p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">下辊温度</label>
                                    <div class="col-sm-10">
                                        <p id="pack-down-temp" class="form-control-static"><span>0</span>℃<span>（未启动）</span></p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">包装袋数</label>
                                    <div class="col-sm-10">
                                        <p id="pack-count" class="form-control-static">
                                            <span>0</span>袋/<span>0</span>袋<span>（自动）</span></p>

                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">每袋容量</label>
                                    <div class="col-sm-10">
                                        <p id="pack-volume" class="form-control-static">
                                            <span>0</span>mL</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-xs-4 col-sm-4 col-lg-4">
                            <button id="pack-config" class="btn btn-primary center-block pack-func-btn" disabled="disabled" data-toggle="modal" data-target="#pack-config-dialog">设置</button>
                        </div>
                    </div>
                </div>
                <!-- 四个参数显示部分 end -->

                <!-- 包装部分的所有按钮 -->
                <div>
                    <button id="pack-switch-btn" class="btn btn-primary">启动</button>
                    <button id="pack-once" class="btn btn-primary pack-func-btn" disabled="disabled">注入</button>
                    <button id="pack-clear" class="btn btn-primary pack-func-btn" disabled="disabled">清洗</button>
                    <button id="pack-auto" class="btn btn-primary pack-func-btn" disabled="disabled">自动</button>
                    <button id="pack-warm" class="btn btn-primary pack-func-btn" disabled="disabled">热合</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 使用bootstrap的模态框来实现设置包装参数时的弹框 -->
    <div id="pack-config-dialog" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="pack-config-modal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="pack-config-modal">配置包装参数</h4>
                </div>
                <div class="modal-body">
                    <div class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">上辊温度</label>
                            <div class="col-sm-10">
                                <div class="input-group">
                                    <input type="number" class="form-control" id="pack-input-upper" placeholder="请输入上辊温度">
                                    <div class="input-group-addon">℃</div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">下辊温度</label>
                            <div class="col-sm-10">
								<div class="input-group">
                                    <input type="number" class="form-control" id="pack-input-down" placeholder="请输入下辊温度">
                                    <div class="input-group-addon">℃</div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">包装袋数</label>
                            <div class="col-sm-10">
                                <div class="input-group">
                                    <input type="number" class="form-control" id="pack-input-count" placeholder="请输入包装袋数">
                                    <div class="input-group-addon">袋</div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">每袋容量</label>
                            <div class="col-sm-10">
                                <div class="input-group">
                                    <input type="number" class="form-control" id="pack-input-volume" placeholder="请输入包装容量">
                                    <div class="input-group-addon">mL</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button id="pack-config-confirm" type="button" class="btn btn-primary">确定</button>
                </div>
            </div>
        </div>
    </div>


    <!-- jQuery和bootstrap的依赖 -->
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="../js/bootstrap/bootstrap.js"></script>
    <!-- 所有的硬件驱动部分程序写在这里 -->
    <script type="text/javascript" src="../js/hardwaredriver.js"></script>
	<!-- 有关包装部分的UI显示用函数，该文件必须在index.js之前引入 -->
	<script type="text/javascript" src="../js/packui.js"></script>
    <!-- 你自己的js文件引入位置 -->-->
    <script type="text/javascript" src="../js/index.js"></script>
</body>
